<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>启德新急症医院 - 安全培训考试</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
        }
        
        :root {
            --primary-red: #c8102e;
            --dark-red: #a00d24;
            --light-red: #f8d7da;
            --dark-gray: #333;
            --mid-gray: #666;
            --light-gray: #f5f5f5;
            --white: #ffffff;
            --black: #000000;
        }
        
        body {
            background: linear-gradient(135deg, var(--light-gray) 0%, var(--white) 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background-color: var(--white);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            width: 90%;
            max-width: 800px;
            overflow: hidden;
            border-top: 5px solid var(--primary-red);
        }
        
        .header {
            background: linear-gradient(90deg, var(--primary-red) 0%, var(--dark-red) 100%);
            color: var(--white);
            padding: 25px;
            text-align: center;
            position: relative;
        }
        
        .header h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1rem;
            opacity: 0.9;
        }
        
        .header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--black);
        }
        
        .content {
            padding: 25px;
        }
        
        .welcome-screen, .quiz-screen, .result-screen, .admin-screen {
            display: none;
        }
        
        .active {
            display: block;
        }
        
        .welcome-screen {
            text-align: center;
        }
        
        .welcome-screen h2 {
            color: var(--primary-red);
            margin-bottom: 20px;
        }
        
        .welcome-screen p {
            color: var(--mid-gray);
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .input-group {
            margin-bottom: 25px;
            text-align: left;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--dark-gray);
            font-weight: 500;
        }
        
        .input-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        .input-group input:focus {
            border-color: var(--primary-red);
            outline: none;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 16px;
        }
        
        .btn-primary {
            background-color: var(--primary-red);
            color: var(--white);
        }
        
        .btn-primary:hover {
            background-color: var(--dark-red);
        }
        
        .btn-secondary {
            background-color: var(--dark-gray);
            color: var(--white);
        }
        
        .btn-secondary:hover {
            background-color: var(--black);
        }
        
        .btn-admin {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--dark-gray);
            color: var(--white);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            z-index: 100;
        }
        
        .quiz-info {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            background-color: var(--light-gray);
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .question-container {
            margin-bottom: 25px;
        }
        
        .question {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--dark-gray);
            font-weight: 500;
            line-height: 1.4;
        }
        
        .options {
            list-style-type: none;
            margin-bottom: 20px;
        }
        
        .option {
            padding: 15px;
            background-color: var(--light-gray);
            border: 2px solid #ddd;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .option:hover {
            background-color: #e9e9e9;
            border-color: #ccc;
        }
        
        .option.selected {
            background-color: var(--light-red);
            border-color: var(--primary-red);
            color: var(--dark-red);
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .result-screen {
            text-align: center;
        }
        
        .result-icon {
            font-size: 4rem;
            color: var(--primary-red);
            margin: 20px 0;
        }
        
        .score {
            font-size: 2.5rem;
            color: var(--primary-red);
            margin: 20px 0;
            font-weight: bold;
        }
        
        .user-name {
            color: var(--dark-gray);
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        
        .admin-screen h2 {
            color: var(--primary-red);
            text-align: center;
            margin-bottom: 25px;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background-color: var(--light-gray);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }
        
        .stat-card h3 {
            color: var(--dark-gray);
            margin-bottom: 10px;
        }
        
        .stat-value {
            font-size: 2rem;
            color: var(--primary-red);
            font-weight: bold;
        }
        
        .results-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .results-table th, .results-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .results-table th {
            background-color: var(--primary-red);
            color: var(--white);
        }
        
        .results-table tr:nth-child(even) {
            background-color: var(--light-gray);
        }
        
        .progress-container {
            margin: 20px 0;
        }
        
        .progress-bar {
            height: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-red) 0%, var(--dark-red) 100%);
            border-radius: 5px;
            width: 0%;
            transition: width 0.5s;
        }
        
        .error-message {
            color: var(--primary-red);
            margin-top: 5px;
            font-size: 14px;
            display: none;
        }
        
        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.5rem;
            }
            
            .question {
                font-size: 1.1rem;
            }
            
            .stats {
                grid-template-columns: 1fr;
            }
            
            .navigation {
                flex-direction: column;
                gap: 10px;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>启德新急症医院项目前线人员安全培训考试</h1>
            <p>保障医疗安全，从专业培训开始</p>
        </div>
        
        <div class="content">
            <!-- 欢迎屏幕 -->
            <div class="welcome-screen active" id="welcome-screen">
                <h2>欢迎参加安全培训考试</h2>
                <p>本次考试包含5道关于医院前线人员安全知识的题目，完成后将显示您的得分。请务必如实填写您的姓名，以便记录考试成绩。</p>
                
                <div class="input-group">
                    <label for="user-name">请输入您的姓名</label>
                    <input type="text" id="user-name" placeholder="请输入真实姓名">
                    <div class="error-message" id="name-error">请输入您的姓名</div>
                </div>
                
                <button class="btn btn-primary" id="start-btn">开始考试</button>
            </div>
            
            <!-- 考试屏幕 -->
            <div class="quiz-screen" id="quiz-screen">
                <div class="quiz-info">
                    <div class="question-count">题目: <span id="current">1</span>/<span id="total">5</span></div>
                    <div class="user-info">考生: <span id="current-user">未知</span></div>
                </div>
                
                <div class="progress-container">
                    <div class="progress-bar">
                        <div class="progress" id="progress"></div>
                    </div>
                </div>
                
                <div class="question-container">
                    <h2 class="question" id="question">问题加载中...</h2>
                    <ul class="options" id="options">
                        <li class="option">选项加载中...</li>
                    </ul>
                </div>
                
                <div class="navigation">
                    <button class="btn btn-secondary" id="prev-btn">上一题</button>
                    <button class="btn btn-primary" id="next-btn">下一题</button>
                    <button class="btn btn-primary" id="submit-btn" style="display: none;">提交答案</button>
                </div>
            </div>
            
            <!-- 结果屏幕 -->
            <div class="result-screen" id="result-screen">
                <div class="result-icon">
                    <i class="fas fa-award"></i>
                </div>
                <h2>考试完成！</h2>
                <div class="user-name"><span id="result-user">考生</span>，您的得分是：</div>
                <div class="score" id="score">0/5</div>
                <p>感谢您参与启德新急症医院安全培训考试</p>
                <button class="btn btn-primary" id="restart-btn" style="margin-top: 20px;">再次考试</button>
            </div>
            
            <!-- 管理员屏幕 -->
            <div class="admin-screen" id="admin-screen">
                <h2>考试数据统计</h2>
                
                <div class="stats">
                    <div class="stat-card">
                        <h3>参加考试人数</h3>
                        <div class="stat-value" id="total-participants">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>平均得分</h3>
                        <div class="stat-value" id="average-score">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>最高得分</h3>
                        <div class="stat-value" id="highest-score">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>最低得分</h3>
                        <div class="stat-value" id="lowest-score">0</div>
                    </div>
                </div>
                
                <h3>考试记录</h3>
                <table class="results-table">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>得分</th>
                            <th>考试时间</th>
                        </tr>
                    </thead>
                    <tbody id="results-body">
                        <!-- 动态添加考试记录 -->
                    </tbody>
                </table>
                
                <button class="btn btn-secondary" id="back-btn" style="margin-top: 30px;">返回</button>
            </div>
        </div>
    </div>
    
    <button class="btn-admin" id="admin-btn">
        <i class="fas fa-lock"></i>
    </button>

    <script>
        // 题库数据
        const questions = [
            {
                question: "在医院环境中，处理锐器时应遵循什么原则？",
                options: [
                    "立即丢弃到普通垃圾桶",
                    "使用后立即复帽",
                    "直接用手传递",
                    "立即丢弃到专用锐器盒"
                ],
                correct: 3
            },
            {
                question: "洗手是预防医院感染最重要的措施，应该持续至少多少秒？",
                options: [
                    "5秒",
                    "10秒",
                    "20秒",
                    "30秒"
                ],
                correct: 2
            },
            {
                question: "下列哪项不是个人防护装备(PPE)？",
                options: [
                    "口罩",
                    "手套",
                    "白大褂",
                    "听诊器"
                ],
                correct: 3
            },
            {
                question: "处理血液、体液时应使用什么级别的手套？",
                options: [
                    "棉布手套",
                    "乳胶或丁腈手套",
                    "塑料手套",
                    "不需要戴手套"
                ],
                correct: 1
            },
            {
                question: "医疗废物应该如何处理？",
                options: [
                    "与普通垃圾一起处理",
                    "分类收集，专用容器",
                    "随意丢弃",
                    "焚烧处理"
                ],
                correct: 1
            }
        ];

        // 初始化变量
        let currentQuestion = 0;
        let userAnswers = new Array(questions.length).fill(null);
        let userName = "";
        let examResults = JSON.parse(localStorage.getItem('examResults')) || [];

        // DOM元素
        const welcomeScreen = document.getElementById('welcome-screen');
        const quizScreen = document.getElementById('quiz-screen');
        const resultScreen = document.getElementById('result-screen');
        const adminScreen = document.getElementById('admin-screen');
        const questionElement = document.getElementById('question');
        const optionsElement = document.getElementById('options');
        const currentElement = document.getElementById('current');
        const totalElement = document.getElementById('total');
        const progressElement = document.getElementById('progress');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const submitBtn = document.getElementById('submit-btn');
        const scoreElement = document.getElementById('score');
        const userNameInput = document.getElementById('user-name');
        const currentUserElement = document.getElementById('current-user');
        const resultUserElement = document.getElementById('result-user');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const adminBtn = document.getElementById('admin-btn');
        const backBtn = document.getElementById('back-btn');
        const totalParticipantsElement = document.getElementById('total-participants');
        const averageScoreElement = document.getElementById('average-score');
        const highestScoreElement = document.getElementById('highest-score');
        const lowestScoreElement = document.getElementById('lowest-score');
        const resultsBodyElement = document.getElementById('results-body');
        const nameError = document.getElementById('name-error');

        // 设置题目总数
        totalElement.textContent = questions.length;

        // 开始考试
        startBtn.addEventListener('click', () => {
            userName = userNameInput.value.trim();
            if (userName === "") {
                nameError.style.display = 'block';
                userNameInput.style.borderColor = 'var(--primary-red)';
                return;
            }
            
            nameError.style.display = 'none';
            userNameInput.style.borderColor = '#ddd';
            currentUserElement.textContent = userName;
            switchScreen(quizScreen);
            showQuestion();
        });

        // 显示当前题目
        function showQuestion() {
            const question = questions[currentQuestion];
            questionElement.textContent = question.question;
            
            // 清空选项
            optionsElement.innerHTML = '';
            
            // 添加选项
            question.options.forEach((option, index) => {
                const li = document.createElement('li');
                li.textContent = option;
                li.className = 'option';
                if (userAnswers[currentQuestion] === index) {
                    li.classList.add('selected');
                }
                li.addEventListener('click', () => selectOption(index));
                optionsElement.appendChild(li);
            });
            
            // 更新进度
            currentElement.textContent = currentQuestion + 1;
            progressElement.style.width = `${((currentQuestion + 1) / questions.length) * 100}%`;
            
            // 更新按钮状态
            prevBtn.disabled = currentQuestion === 0;
            
            // 如果是最后一题，显示提交按钮
            if (currentQuestion === questions.length - 1) {
                nextBtn.style.display = 'none';
                submitBtn.style.display = 'block';
            } else {
                nextBtn.style.display = 'block';
                submitBtn.style.display = 'none';
            }
        }

        // 选择选项
        function selectOption(index) {
            userAnswers[currentQuestion] = index;
            showQuestion();
        }

        // 下一题
        nextBtn.addEventListener('click', () => {
            if (currentQuestion < questions.length - 1) {
                currentQuestion++;
                showQuestion();
            }
        });

        // 上一题
        prevBtn.addEventListener('click', () => {
            if (currentQuestion > 0) {
                currentQuestion--;
                showQuestion();
            }
        });

        // 提交答案
        submitBtn.addEventListener('click', () => {
            // 计算得分
            let score = 0;
            userAnswers.forEach((answer, index) => {
                if (answer === questions[index].correct) {
                    score++;
                }
            });
            
            // 保存考试结果
            const result = {
                name: userName,
                score: score,
                total: questions.length,
                date: new Date().toLocaleString()
            };
            
            examResults.push(result);
            localStorage.setItem('examResults', JSON.stringify(examResults));
            
            // 显示得分
            scoreElement.textContent = `${score}/${questions.length}`;
            resultUserElement.textContent = userName;
            
            switchScreen(resultScreen);
        });

        // 重新开始
        restartBtn.addEventListener('click', () => {
            currentQuestion = 0;
            userAnswers = new Array(questions.length).fill(null);
            switchScreen(welcomeScreen);
            userNameInput.value = "";
        });

        // 切换屏幕
        function switchScreen(screen) {
            welcomeScreen.classList.remove('active');
            quizScreen.classList.remove('active');
            resultScreen.classList.remove('active');
            adminScreen.classList.remove('active');
            
            screen.classList.add('active');
        }

        // 管理员按钮
        adminBtn.addEventListener('click', () => {
            // 简单密码验证
            const password = prompt("请输入管理员密码:");
            if (password === "admin123") { // 实际应用中应使用更安全的验证方式
                updateAdminStats();
                switchScreen(adminScreen);
            } else {
                alert("密码错误");
            }
        });

        // 返回按钮
        backBtn.addEventListener('click', () => {
            switchScreen(welcomeScreen);
        });

        // 更新管理员统计数据
        function updateAdminStats() {
            const totalParticipants = examResults.length;
            totalParticipantsElement.textContent = totalParticipants;
            
            if (totalParticipants > 0) {
                const scores = examResults.map(result => result.score);
                const totalScore = scores.reduce((sum, score) => sum + score, 0);
                const averageScore = (totalScore / totalParticipants).toFixed(1);
                const highestScore = Math.max(...scores);
                const lowestScore = Math.min(...scores);
                
                averageScoreElement.textContent = averageScore;
                highestScoreElement.textContent = highestScore;
                lowestScoreElement.textContent = lowestScore;
                
                // 更新考试记录表格
                resultsBodyElement.innerHTML = '';
                examResults.forEach(result => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${result.name}</td>
                        <td>${result.score}/${result.total}</td>
                        <td>${result.date}</td>
                    `;
                    resultsBodyElement.appendChild(row);
                });
            } else {
                averageScoreElement.textContent = "0";
                highestScoreElement.textContent = "0";
                lowestScoreElement.textContent = "0";
                resultsBodyElement.innerHTML = '<tr><td colspan="3">暂无考试记录</td></tr>';
            }
        }

        // 输入框回车键支持
        userNameInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                startBtn.click();
            }
        });
    </script>
</body>
</html>